<!DOCTYPE html>
<html>
  <head lang="zh-CN">
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>画板</title>
    <link rel="stylesheet" href="./font/iconfont.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/style.css">
  </head>
  <body>
    <!-- HTML5新增的标签：配合JavaScript Canvas技术的画布标签 需要设置宽高-->
    <canvas id="can"></canvas>

    <div class="tool-bar">
      <div class=" wraper color-input-wraper">
        <span>颜色:</span>
        <input type="color" id="colorInput">
      </div>
      <div class="wraper line-width-wraper">
        <span>线宽:</span>
        <input type="range" min="1" max="30" value="1" step="1" id="lineWidthRange">
        <span class="j-line-width">1</span>
      </div>
      <div class="wraper clear-all-wraper">
        <span class="icon icon-clear" id="clearAllBtn"></span>
      </div>
      <div class="wraper eraser-wraper">
        <span class="icon icon-eraser" id="eraserBtn"></span>
        <input type="range" min="5" max="35" value="1" step="1" id="eraserLineWidthRange">
        <span class="j-eraser-line-width">5</span>
        <span id="eraserCircle" class="eraser-circle"></span>
      </div>
      <div class="wraper undo-wraper">
        <span class="icon icon-undo" id="undoBtn"></span>
      </div>
      <div class="wraper redo-wraper">
        <span class="icon icon-redo" id="redoBtn"></span>
      </div>
    </div>
    
    <script type="text/javascript" src="./js/index.js"></script>
  </body>
</html>